import React, { useState, useEffect, useRef } from 'react'
import { NavBar, Space } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { MoreOutline } from 'antd-mobile-icons'
import { useParams } from 'react-router-dom'
import { proDetail } from '../../../models'
import { Swiper, Toast, Tag } from 'antd-mobile'
import './detail.scss'
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { ActionBar } from 'react-vant'
import { cartAdd } from '@/models'
import { useSelector } from 'react-redux'
import { ShareSheet, Cell } from 'react-vant'
import { Popover } from 'react-vant';

const options = [
  [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
  ],
  [
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
    { name: '小程序码', icon: 'weapp-qrcode' },
  ],
]

const actions = [{ text: '首页' }, { text: '购物车' }, { text: '分享' }];

export default function Detail() {
  const [visible, setVisible] = useState(false)
  const navigate = useNavigate()
  const params = useParams()
  let id = params.proid
  const userid = useSelector(state => state.user).userId
  let [banners, setBanners] = useState([])
  let [details, setDetails] = useState({})

  useEffect(() => {
    proDetail(id).then(res => {
      console.log(res);
      setBanners(res.data.banners[0].split(','))
      setDetails(res.data)
    })
  }, [])

  const select = (option) => {
    switch (option.text) {
      case '首页': navigate('/home')
        break
      case '购物车': navigate('/cart')
        break
      case '分享': setVisible(true)
        break
      default: return
    }
  }

  const right = (
    <Popover
      actions={actions}
      theme="dark"
      placement='bottom-end'
      onSelect={select}
      reference={
        <div style={{ fontSize: 24 }}>
          <Space style={{ '--gap': '16px' }}>
            <MoreOutline />
          </Space>
        </div>
      }
    />

  )
  const back = () => {
    navigate(-1)
  }

  const items = banners.map((item, index) => (
    <Swiper.Item key={index}>
      <div
        onClick={() => {
          Toast.show(`你点击了卡片 ${index + 1}`)
        }}
      >
        <img src={item} alt="" width='100%' />
      </div>
    </Swiper.Item>
  ))
  const AddCart = () => {
    console.log(userid);
    let data = {
      userid,
      proid: id,
      num: 1
    }
    cartAdd(data).then(res => {
      console.log(res);
    })
  }
  return (
    <div className='detail'>
      <NavBar back='返回' right={right} onBack={back}>
        详情
      </NavBar>

      <Swiper
        loop
        autoplay
        onIndexChange={i => {
          console.log(i, 'onIndexChange1')
        }}
      >
        {items}
      </Swiper>
      <h3 className='detail-price'>￥{details.originprice}</h3>
      <h3 className='detail-title'>
        {details.issale === 1 && <Tag color='danger' style={{ marginRight: '3%' }}>自营</Tag>}
        <span className="name">{details.proname}</span>
      </h3>
      <ActionBar>
        <ActionBar.Icon
          icon={<ChatO />}
          text='客服'
          onClick={() => console.log('chat click')}
        />
        <ActionBar.Icon
          icon={<CartO />}
          text='购物车'
          onClick={() => navigate('/cart')}
        />
        <ActionBar.Icon
          icon={<ShopO />}
          text='店铺'
          onClick={() => console.log('shop click')}
        />
        <ActionBar.Button type='warning' text='加入购物车' onClick={AddCart} />
        <ActionBar.Button type='danger' text='立即购买' />
      </ActionBar>

      <ShareSheet
        visible={visible}
        options={options}
        title='立即分享给好友'
        onCancel={() => setVisible(false)}
        onSelect={(option, index) => {
          console.log('option', option)
          console.log('index', index)
          setVisible(false)
        }}
      />
    </div>
  )
}
